<template>
	<s-layout id="layout" :title="'提现'" :navbar="normal" :leftIconColor="'#ffffff'" :autoBack="false" :leftIcon="leftIcon" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
		<view id="app" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user/user_user_background.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px',height:(516 - safeAreaInsets?.top - 44) + 'px'}">
			<view class="areas">
				<!-- 资产盒子 -->
				<view class="money_box">
					<view class="money">{{ userInfo.money }}</view>
					<view class="total_assets">总资产（元）</view>
					<view class="two_box">
						<view  class="two_box_item">
							<view class="money_num">{{ total_income }}</view>
							<view class="money_text">累计收益</view>
						</view>
						<view class="two_box_item">
							<view class="money_num">{{ total_withdraw }}</view>
							<view class="money_text">累计提现</view>
						</view>
					</view>
				</view>

				<!-- 提现金额 -->
				<view class="Income_list">
                    <view class="Income_detail">提现金额</view>
                    <view class="cash_withdrawal_amount_box">
                        <view class="cash_withdrawal_amount_left">
                            <view class="one_text">￥</view>
                            <input type="digit" placeholder="请输入提现金额" v-model="money_sum">
                        </view>
                        <view class="two_text" @tap="fullWithdrawal">全部提现</view>
                    </view>
                    <view class="Income_detail">提现至</view>
                    <view class="whither" @tap="withdrawalMethod">
                        <view class="cash_withdrawal_amount_left">
                            <view class="image" v-if="means_src">
                                <image :src="means_src"  mode="scaleToFill"/>
                            </view>
                            <view class="bank_gray">{{ means ?  means : '请选择提现方式' }}</view>
                        </view>
                        <up-icon name="arrow-right" color="#999999" size="14"></up-icon>
                    </view>
                    <view class="whither_display" v-if="means">
                        <view class="not">{{ present_data ? present_data : '暂无提现账户' }}</view>
                        <view class="add" @tap="returnedSwitch">选择账户</view>
                    </view>
				</view>
			</view>
		</view>

        <view>
            <s-button @netWork="requestWithdrawal" :text="'申请提现'"></s-button>
        </view>
	</s-layout>
    <!-- 选择提现方式 -->
        <fui-select :maskClosable="true" :show="method_show" :options="way" :highlight="false" title="请选择提现方式" @confirm="method_confirm" @close="closePopup"></fui-select>
    <!-- 选择账户 -->
    <s-popup-list @selectedData="returned_switchTitle" :current_page="returned_current_page"
        :skipPage="'/subpackage/staff/workbench/returned_info/returned_info_add'"
        @subcomponentSearch="returned_subcomponentSearch" :last_page="returned_last_page"
        @pageEvent="returned_pageEvent" :arrayList="returnedDataList" ref="returned_popupListRef" :popupTitle="`选择${means.substring(0, 3)}账户`"
        :isBank="means_value == 'alipay' ? false : true" :listingName="`${means.substring(0, 3)}信息`" :searchBoxIsShow="false" :isPage="false" :showGoLink="'#'">
    </s-popup-list>
</template>

<script setup>
    import { baseUrl } from '@/sheep/config';
    import sheep from '@/sheep';
    import { ref, reactive, unref } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    const { safeAreaInsets } = uni.getSystemInfoSync()
    const user_Info = sheep.$store('user').userInfo
    const userInfo = ref()
    userInfo.value = user_Info
    onLoad((options) => {
        user_money_logIndexList()
    })
    //------------------ 选择账户、提现开始 -----------------------
    const way = ref([
        {
			text: '支付宝账户',
			src: `${baseUrl}/assets/addons/shopro/uniapp/pay/alipay.png`,
            value:'alipay'
		},
        {
            text: '银行卡提现',
			src: `${baseUrl}/assets/addons/shopro/uniapp/pay/bank.png`,
            value:'bank'
        },
        // {
        //  text: '微信零钱',
		// 	src: `${baseUrl}/assets/addons/shopro/uniapp/pay/wechat.png`,
        //  value:'wechat'
        // }
    ])

    // 确定选择提现方式
    const means = ref('')
    const means_src = ref('')
    const means_value = ref()
    // 选择账户
    const method_confirm = (e) => {
        present_data.value = ''
        present_id.value = ''
        means.value = e.options.text
        means_src.value = e.options.src
        means_value.value = e.options.value
        returnedDataList.value = []
        returned_page.value = 1
        getReturnedInfoData()
        closePopup()
    }
    // 选择提现方式
    const method_show = ref(false)
    const closePopup = () => {
        method_show.value = false
    }
    const withdrawalMethod = () => {
        method_show.value = true
    }

    const money_sum = ref(null) // 提现金额
    // 全部提现
    const fullWithdrawal = () => {
        money_sum.value = userInfo.value.money
    }

    // 模块 申请提现按钮
    const requestWithdrawal = () => {
        if(money_sum.value > userInfo.value.money) {
            sheep.$helper.toast('账户余额不足！')
        } else {
                withdrawApplyPort()
        }
    }


    // 接口 封装提现接口
    const withdrawApplyPort = async () => {
            sheep.$helper.toast('请选择提现账户');
            let params = {
                type: means_value.value,
                money: money_sum.value,
                return_info_id: present_id.value
            }
            try {
                const res = await sheep.$api.wallet.withdrawApplyAPI(params);
                setTimeout(() => {
                    sheep.$helper.toast(res.msg);
                }, 500);
                if (res.code == 1) {
                    console.log('成功');
                } else {
                    const result = await sheep.$store('user').getInfo();
                    userInfo.value = result  // 页面重新赋值 
                }
            } catch (error) {
                console.error(error);
            }
    }

    //------------------ 选择账户、提现结束 -----------------------

    const returned_switchTitle = (item) => {
        switch (means_value.value) {
            case 'alipay':
            present_data.value = item.title
            present_id.value = item.id
                break;
            case 'bank':
            present_data.value = item.title
            present_id.value = item.id   
                break;
            // case 'wechat':
            // present_data.value = `暂时什么都没有`    
            //     break;
        }
    }

    // 封装我的钱包接口
	const wallet_list = ref([])
	const page = ref(1)
	const current_page = ref()
	const last_page = ref()
	const total = ref()
	const total_income = ref()
	const total_withdraw = ref()
	const user_money_logIndexList = async () => {
		let params = {
			page:page.value
		}
		const res = await sheep.$api.wallet.user_money_logIndexAPI(params)
		wallet_list.value = [...wallet_list.value,...res?.data.rows]
		current_page.value = res.data.current_page
		last_page.value = res.data.last_page
		total.value = res.data.total
		total_income.value = res.data.total_income
		total_withdraw.value = res.data.total_withdraw
	}

    //------------------ 分类开始-----------------------
    // 获取回款信息
    const returnedDataList = ref([])
    const returned_current_page = ref()
    const returned_last_page = ref()
    const returned_page = ref(1)
    const returned_popupListRef = ref(null)
    const returned_keywords = ref()
    // 点击弹出
    const returnedSwitch = () => {
        returned_popupListRef.value.open()
    }
    // 封装回款账户接口
    const present_data = ref('')
    const present_id = ref()
    const getReturnedInfoData = async () => {
        let params = {
            filter: JSON.stringify({
                bank_name: returned_keywords.value,
                type:means_value.value,
            }),
            op: JSON.stringify({
                bank_name: 'LIKE',
                type:'=',
            }),
            page: returned_page.value,
        };
        const res = await sheep.$api.returned_info.getReturnedInfo(params);
        returnedDataList.value = [...returnedDataList.value, ...res?.data.rows];

        // 改写数组
        returnedDataList.value.forEach(item => {
            switch (means_value.value) {
                case 'alipay':
                    item.title = `${item.name} ${item.mobile}`
                    break;
                case 'bank':
                    let bank_number = item.bank_number.substr(0, 4) + '****' + item.bank_number.substr(-4)
                    item.title = item.bank.name + '（' + bank_number + '）'
                    item.logo = item.bank.logo
                    break;
                // case 'wechat':
                //     present_data.value = `暂时什么都没有`    
                //     break;
            }
        });
        returned_current_page.value = res.data.current_page;
        returned_last_page.value = res.data.last_page;
    }
    // 回款账户列表分页
    const returned_pageEvent = () => {
        if (returned_current_page.value < returned_last_page.value) {
            returned_page.value += 1;
        } else {
            return;
        }
        getReturnedInfoData();
    }
    // 回款信息搜索
    const returned_subcomponentSearch = (value) => {
        returned_keywords.value = value
        returnedDataList.value = []
        returned_page.value = 1
        getReturnedInfoData();
    }
    //------------------ 分类结束-----------------------
</script>

<style lang="scss">

	#app {
		background-size: contain; /* 或 cover */
		background-repeat :no-repeat;
	}

	// 版心
	.areas {
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
	}

	// 资产部分
	.money_box {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 34rpx 0 40rpx 40rpx;
        margin-bottom: 20rpx;
        margin-top: 30rpx;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
		.money {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: 74rpx;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-bottom: 14rpx;
		}
		.total_assets {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: $uni-font-size-base;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-bottom: 40rpx;
		}
		.two_box {
			display: flex;
			align-items: center;
			.two_box_item {
				flex-grow: 1;
				.money_num {
					font-family: PingFangSC;
					color: $uni-text-color;
					font-weight: $uni-font-weight;
					font-size: 40rpx;
					font-style: normal;
					text-decoration: none;
					text-align: left;
					margin-bottom: 10rpx;
				}
				.money_text {
					font-family: PingFangSC;
					color: $uni-text-color;
					font-weight: 500;
					font-size: $uni-font-size-base;
					font-style: normal;
					text-decoration: none;
					text-align: left;
				}
			}
		}
	}

	// 提现金额
	.Income_list {
		// height: 438rpx;
		border-radius: 8px;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
		padding: 30rpx 20rpx 40rpx 20rpx;
		.Income_detail {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: $uni-font-size-big;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-left: 10rpx;
			padding-bottom: 32rpx;
		}
        .cash_withdrawal_amount_box {
            height: 72rpx;
            border-radius: 8px;
            background-color: #FFFFFF;
            border: 2px solid #EEEEEE;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40rpx;
            color: $uni-color-primary;
            font-family: PingFangSC;
            font-weight: 550;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
            .one_text {
                padding-left: 20rpx;
                padding-right: 10rpx;
            }
            .two_text {
                padding-right: 20rpx;
            }
        }
        .whither {
            height: 72rpx;
            border-radius: 8px;
            background-color: #FFFFFF;
            border: 2px solid #EEEEEE;
            padding-right: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .image {
                width: 50rpx;
                height: 50rpx;
                // background-color: purple;
                margin-left: 20rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .bank {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-base;
                font-style: normal;
                text-decoration: none;
            }
            .bank_gray {
                margin-left: 20rpx;
                font-family: PingFangSC;
                color: #666666;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-base;
                font-style: normal;
                text-decoration: none;
            }
        }
        .cash_withdrawal_amount_left {
            display: flex;
            align-items: center;
        }
	}

    .whither_display{
        margin-top: 30rpx;
        height: 72rpx;
        border-radius: 8px;
        background-color: #FFFFFF;
        border: 2px solid #EEEEEE;
        padding-right: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .not {
            color: #999999;
            margin-left: 20rpx;
            font-size: $uni-font-size-base;
        }
        .add {
            letter-spacing: 2rpx;
            padding: 0 20rpx;
            height: 50rpx;
            border-radius: 25rpx;
            line-height: 50rpx;
            font-size: 22rpx;
            color: #ffffff;
            text-align: center;
            background-color: #4785ff;
        }
    }

    .binding_title_box {
        color: #000000;
        font-weight: $uni-font-weight;
        padding: 60rpx 40rpx 40rpx;
        .binding_title {
            margin-bottom: 20rpx;
        }
    }
    .binding_input_box {
        padding-bottom: 100rpx;
    }
    .binding_button_box {
        // height: 120rpx;
        .binding_button {
            height: 80rpx;
            border-radius: 40rpx;
            background: linear-gradient(to right, #FF6000, #ffa56e);
            margin: 0 20rpx;
            color: #ffffff;
            text-align: center;
            line-height: 80rpx;
        }
    }


</style>